<!-- @format -->

<template>
  <div>
    <!-- Input 输入框 -->
    <template v-if="theProps.data.type === ComponentsType.Input">
      <el-input v-model="theProps.data.fieldValue"></el-input>
    </template>
    <!-- Textarea 文本输入框 -->
    <template v-if="theProps.data.type === ComponentsType.Textarea">
      <el-input v-model="theProps.data.fieldValue" type="textarea"></el-input>
    </template>
    <!-- 输入框 -->
    <template v-if="theProps.data.type === ComponentsType.Select">
      <el-select
        v-model="theProps.data.fieldValue"
        style="width: 200px"
        value-key=""
        placeholder=""
        clearable
        filterable
        @change=""
      >
        <el-option
          v-for="item in theProps.data.props.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
  </div>
</template>

<script setup lang="ts">
  import { ComponentsType } from '../conf'
  const theProps = defineProps({
    data: {
      type: Object,
      default: {},
    },
  })

  // console.log('form-comp --- theProps.data ===>', theProps.data)
</script>

<style scoped></style>
